<template>
  <div class="tab-panel-content" style="display: flex">
    <div class="left-block">
      <span class="current-tab">{{ tab }}</span>
    </div>
    <div class="right-block">
      <div class="btn-row">
        <input type="button" class="action-btn" :value="tab + '上升'" disabled />
      </div>
      <div class="btn-row">
        <input type="button" class="action-btn" :value="tab + '下降'" disabled />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const tab = computed(() => route.params.tab as string)
</script>

<style scoped>
.left-block {
  width: 320px;
  height: 180px;
  background: #fff;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  border: 1px solid #e5e5e5;
  border-right: none;
}
.right-block {
  width: 480px;
  height: 180px;
  background: #f7f7f7;
  border-radius: 0 4px 4px 0;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}
.btn-row {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-start;
}
.action-btn {
  width: 260px;
  height: 36px;
  font-size: 16px;
  color: #aaa;
  background: #f3f3f3;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 16px;
  cursor: not-allowed;
}
.current-tab {
  color: #333;
}
.tab-panel-content {
  height: 100%;
}
</style>
